<template>
  <div class="top-bar-base">
    <div class="top-bar" :class="`top-bar-${barType}`">
      <template v-if="props.barType === 1">
        <img class="logo" :src="getAssets('img/app/app-logo.png')" />
        <span>简意家居</span>
      </template>
      <template v-if="props.barType === 2">
        <!-- 返回上级 -->
        <i class="iconfont icon-fanhui call-back-btn" @click="myClick(1)"></i>
      </template>
    </div>
  </div>
</template>
<script setup>
import { defineProps } from "vue";
import { useRouter } from "vue-router";
import { getAssets } from "@/utils";

const router = useRouter();

const props = defineProps({
  barType: {
    type: Number,
    default: 1
  }
});



const myClick = (type) => {
  switch (type) {
    // 返回上级
    case 1:
      router.back();
      break;
    default:
      break;
  }
};



</script>
<style lang="scss" scoped>
.top-bar-base {
  margin: 0 auto;
  width: 7.5rem;
  height: 1rem;
}
.top-bar {
  position: fixed;
  top: 0;
  margin: 0 auto;
  z-index: 999;
  width: 7.5rem;
  height: 1rem;
  font-size: 0.26rem;
  font-weight: bolder;
  background: rgba($color: #090b1a, $alpha: 0.95);
  color: #fff;
  text-align: center;
  display: flex;
  align-items: center;
  .logo {
    margin: 0 0.25rem;
    height: 0.36rem;
  }
  box-shadow:0 0 0.13rem 0.08rem rgba($color: #090b1a, $alpha: 0.98);
}
.top-bar-2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.25rem;
  .call-back-btn {
    font-size: 0.3rem;
  }
}
</style>